<template>
  <div class="limited-row">
    <div class="left-content">
      <div class="in-work">
        标题
      </div>
      <el-input v-model="flaw.title"></el-input>
      <div class="in-work">
        描述
      </div>
      <editor :height="300" v-model="flaw.description"></editor>
      <div class="in-work right-button">
        <el-button @click="saveFlaw">保存</el-button>
      </div>

    </div>
    <div class="right-content">
      <el-descriptions labelClassName="descriptions-label-class"
                       content-class-name="descriptions-content-class" :column="1" border>
        <el-descriptions-item label-class-name="my-label" label="项目">
          <div>
            {{ flaw.projectName }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label-class-name="my-label" label="工作项ID">
          <div>
            {{ flaw.workItemId }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="负责人">
          <project-member class="input-class" v-model="flaw.responsibleId"
                          :project-id="flaw.projectId"></project-member>
        </el-descriptions-item>
        <el-descriptions-item label="严重程度">
          <el-select class="input-class" v-model="flaw.severity" placeholder="请选择严重程度">
            <el-option
              v-for="dict in dict.type.order_of_severity"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="缺陷类型">
          <el-select class="input-class" v-model="flaw.defectClass" placeholder="请选择缺陷类型">
            <el-option
              v-for="dict in dict.type.defect_class"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="重现概率">
          <el-select class="input-class" v-model="flaw.recurrenceProbability" placeholder="请选择重现概率">
            <el-option
              v-for="dict in dict.type.recurrence_probability"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="原因分析">
          <el-select class="input-class" v-model="flaw.causeAnalysis" placeholder="请选择原因分析">
            <el-option
              v-for="dict in dict.type.cause_analysis"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="解决方案">
          <el-select class="input-class" v-model="flaw.solution" placeholder="请选择解决方案">
            <el-option
              v-for="dict in dict.type.solution"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>

</template>

<script>

import {getProjectById} from "@/api/projectUser/userProjects";
import ProjectMember from "@/components/ProjectMember/index.vue";
import {addFlaw} from "@/api/projectUser/userFlaw";

export default {
  name: "AddFlaw",
  components: {ProjectMember},
  dicts: ['defect_class', 'flaw_status', 'cause_analysis', 'test_outcome', 'solution', 'order_of_severity', 'recurrence_probability'],
  data() {
    return {
      flaw: {},
      project: {},
    };
  },
  props: {
    value: Boolean,
    test: Object,
  },
  watch: {
    // test() {
    //   // console.log(this.test);
    //   // this.getProject()
    // }
  },
  mounted() {
    this.getProject()
  },
  methods: {
    saveFlaw() {
      addFlaw(this.flaw).then(res => {
        this.$message.success('保存成功')
        this.$emit('upData')
      })
    },
    getProject() {
      if (this.test == null) return
      getProjectById(this.test.projectId).then(res => {
        this.project = res.data
        let flawC={}
        flawC.projectId = res.data.projectId
        flawC.projectName = res.data.name
        flawC.testId = this.test.testId
        flawC.testPlanId = this.test.testPlanId
        flawC.workItemId = this.test.workItemId
        this.flaw = flawC
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.in-work {
  padding: 10px 0;
  font-size: 20px;
}

.right-button {
  margin-left: auto;
}
</style>
